<template>
	<view>
		<view class="bg">
		</view>
		<tabbar></tabbar>
		<view class="nav">
			<navigator class="nav_item" v-for="(item,index) in nav" :key="index"
			:url="item.url"
			open-type="redirectTo">
				<view class="text" @click="changeIndex(index)" :class="[currentIndex==index?'yellow':'text']">
					{{item.text}}
				</view>
				<view class="bottom" v-if="currentIndex==index">
				</view>
			</navigator>
		</view>
		<view class="search">
			<view class="search_wrapper">
				<view class="image">
					<image src="../../../static/image/sousuotianchong@2x(3).png" mode=""></image>
				</view>
				<view class="input">
					<u-input v-model="keyword" 
					placeholder="请输入想要搜索的关键字"
					height="30"
					@input="change"/>
				</view>
			</view>
		</view>
		<view class="empty" v-if="packageList.length==0">
			<image src="../../../static/image/empty.png" mode=""></image>
		</view>
		<view class="middle">
			<view class="item" v-for="(item,index) in packageList" :key="item.id">
				<view class="top">
					<view class="icon">
						<image src="../../../static/image/juxing2.png" mode=""></image>
					</view>
					<view class="express_sn">
						{{item.order_sn}}
					</view>
					<view class="packageNum">
						共有{{item.package_num}}个包裹
					</view>
				</view>
				<view class="content" v-for="(item1,index1) in item.orderpackage" :key="item1.id">
					<view class="content_wrapper">
						<text class="label">ID编号：</text>
						<text class="data">{{item1.id}}</text>
					</view>
					<view class="content_wrapper">
						<text class="label">物品名称：</text>
						<text class="data">{{item1.name}}</text>
					</view>
					<view class="content_wrapper">
						<text class="label">物品价值：</text>
						<text class="data red">￥{{item1.price}}</text>
					</view>
					<view class="content_wrapper">
						<text class="label">商品类型：</text>
						<text class="data">{{item1.goodstype}}</text>
					</view>
				</view>
				<!-- <view class="content">
					<view class="content_wrapper">
						<text class="label">运输方式：</text>
						<text class="data">{{item.ys_type}}</text>
					</view>
					<view class="content_wrapper">
						<text class="label">支付金额：</text>
						<text class="data red">￥{{item.price}}</text>
					</view>
					<view class="content_wrapper">
						<text class="label">支付时间：</text>
						<text class="data">{{item.time}}</text>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav:[{
					text:"在途中",
					url:"/pages/outemployees/roading/roading"
				},{
					text:"待取件",
					url:"/pages/outemployees/waitToBring/waitToBring"
				},{
					text:"已签收",
					url:"/pages/outemployees/hadbring/hadbring"
				}],
				currentIndex:0,
				type:"order",
				order_status:7,
				offset:0,
				limit:10,
				keyword:"",
				packageList:[]
			}
		},
		async onReachBottom(){
			this.offset+=10;
			this.limit+=10;
			let res=await this.getPackageList(this.type,this.order_status,this.offset,this.limit,this.keyword)
			this.packageList.push(...res)
		},
		async created() {
			this.packageList= await this.getPackageList(this.type,this.order_status,this.offset,this.limit,this.keyword)
		},
		methods: {
			async change(){
				this.packageList=await this.getPackageList(this.type,this.order_status,this.offset,this.limit,this.keyword)
			},
			async getPackageList(type,order_status,offset,limit,keyword){
				let token=uni.getStorageSync("token");
				const {data}=await this.$http({
					url:"order/staff_cn_list",
					header:{
						token
					},
					data:{
						type,
						order_status,
						offset,
						limit,
						keyword
					}
				})
				console.log(data.data.list)
				return data.data.list
			},
			changeIndex(index){
				this.currentIndex=index;
			}
		}
	}
</script>

<style scoped>
.bg{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #F1F1F1;
	z-index: -1;
}
.empty{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.nav{
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-top:1rpx solid  #F1F1F1 ;
	background-color: #FFFFFF;
	padding: 0 20rpx;
	
}
.nav .nav_item{
	width: 15%;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	position: relative;
}
.nav .nav_item .text{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.bottom{
	position: absolute;
	left: 20%;
	top:80%;
	width: 60rpx;
	height: 6rpx;
	background: #F7CC46;
	border-radius: 3rpx;
}
.yellow{
	font-weight: 600;
	color: #F7CC46 !important;
}
.search{
	width: 100%;
	height: 100rpx;
	background: #FFFFFF;
	display: flex;
	align-items: center;
}
.search .image{
	margin-right: 15rpx;
}
.search .image image{
	width: 27rpx;
	height: 27rpx;
	vertical-align: center;
}
.search_wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 70rpx;
	width: 90%;
	margin: auto;
	background: #FFFFFF;
	border: 1rpx solid #999999;
	border-radius: 30rpx;
}
.middle{
	padding: 0 30rpx;
	margin-bottom: 20rpx;
}
.icon image{
	height: 27rpx;
	width: 23rpx;
}
.item{
	background: #FFFFFF;
	box-shadow: 0 0 29rpx 0 rgba(150, 150, 150, 0.3);
	border-radius: 10rpx;
	margin-top: 20rpx;
}
.top{
	display: flex;
	align-items: center;
	padding: 20rpx 0rpx 20rpx 30rpx;
	height: 80rpx;
	border-bottom: 1rpx solid #E5E5E5;
	position: relative;
}
.packageNum{
	position: absolute;
	right: 5%;
	top: 25%;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.top .icon{
	margin-right: 20rpx;
	margin-top: 5rpx;
}
.top .express_sn{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.content{
	padding: 20rpx;
	padding-left: 30rpx;
	border-bottom: 1rpx solid #E5E5E5;
}
.content_wrapper{
	margin-top: 10rpx;
}
.label{
	display: inline-block;
	width: 120rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
}
.data{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.red{
	font-weight: 500;
	color: #CA2929;
}
</style>
